<template>
    <div>
        <div class="searchBox">
         <el-popover placement="bottom-start" width="1000" style="box-shadow: 0 0 8px rgba(0,0,0,.5);" trigger="click">
            <el-form :inline="true" :model="search">
                    <el-form-item label="物料名称" >
                        <el-input v-model="search.name" style="width: 100px;"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="机器型号">
                        <el-select v-model="search.type" placeholder="请选择">
                            <el-option label="【空】" value="" ></el-option>
                            <el-option :label="item.type" :value="item.id" v-for="item in allType" :key="item.id"></el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-button type="primary" @click="searchData" icon="el-icon-search">查询</el-button>
                </el-form>
            <el-button slot="reference" type="primary">查询</el-button>
        </el-popover>
        </div>
          <el-table :data="dataList" :height="tableHeight"  :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;" :header-cell-style="getRowClass">
            <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
            <el-table-column prop="name" label="物料名称" sortable min-width="160"></el-table-column>
            <el-table-column prop="type" label="规格型号" sortable min-width="120"></el-table-column>
            <el-table-column prop="texture" label="材质" sortable min-width="130"></el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="center" width="160">
                <template slot-scope="scope">
                    <el-button @click="showDialog1(scope.row)" type="text" size="small">配置</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
         <el-dialog :title="dialog1.title"  center :visible.sync="dialog1.isShow"  v-dialogDrag>
              <check-table :list="checked.list" @addUpdateCheck='addUpdateCheck'></check-table>
            <el-dialog :title="dialog2.title"  center :visible.sync="dialog2.isShow"  v-dialogDrag  append-to-body>
                <check-config :dialogForm="checked.dialogForm"  @addUpdate="addUpdateHandle"></check-config>
            </el-dialog>
          </el-dialog>
    </div>
</template>
<script>
import api from '@/axios/api.js'
import scybHttp from '@/axios/scybHttp.js';
import cgbHttp from '@/axios/cgbHttp.js';
import checkConfig from './components/checkConfig.vue'
import checkTable from './components/checkTable.vue'
export default {
    components:{
        checkConfig,
        checkTable
    },
    data(){
        return {
             tableHeight: document.documentElement.clientHeight - 170,/**表格高度 */
             tableDialogHeightTabPane:{/**dialog style */
                height: (document.documentElement.clientHeight - 300) + 'px',
                overflowY: 'auto'
            },
            allType:[],
            dataList:[],
            search:{
              name:''
            },
            pagination:{
                currentPage:1,
                pageSize:10,
                total:0
            },
            dialog1:{
                isShow:false,
                title:''
            },
            dialog2:{
                isShow:false,
                title:''
            },
            checked:{
                pid:'',
                list:[],
                dialogForm:{}
            }
        }
    },
    created(){
        let self = this;
        self.getTableData();
        scybHttp.bzAllJy().then(res=>{
            self.allType = res.content;
        })
    },
    methods:{
        getSelectBom(){

        },
        getTableData(){
            let self = this;
            let postData={
                currentPage:self.pagination.currentPage,
                pageSize:self.pagination.pageSize,
                name:self.search.name
            }
            cgbHttp.cgMaterialList(postData).then(res=>{
                self.dataList=res.content.records;
                self.pagination.total=res.content.total;
            })
        },
        handleSearch(){
            this.pagination.currentPage=1;
            this.getTableData();
        },
        searchData(){
            this.pagination.currentPage=1;
            this.getTableData();
        },
        handleSizeChange(size){
            this.pagination.pageSize=size;
            this.pagination.currentPage=1;
            this.getTableData();
        },
        handleCurrentChange(current){
            this.pagination.currentPage=current;
            this.getTableData();
        },
        showDialog1(row){
            let self = this;
            self.dialog1.isShow=true;
            self.dialog1.title="配置";
            self.checked.pid=row.id;
            self.getCheckConfigList();
        },
        getCheckConfigList(){
            let self=this;
            api.materialCheckedList(self.checked.pid).then(res=>{
                self.checked.list=res.content;
            })
        },
        addUpdateCheck(data){
             let self = this;
            self.dialog2.isShow=true;
            let type=data.type;
            let row = data.row;
            self.dialog2.title=type== 'insert'?'新增':'修改';
            self.checked.dialogForm= type=="insert"?{
                pid:self.checked.pid,
                name:'',
                reference:'',
                unit:'',
                type:'',
                isEnable:'1',
                remark:'',
                rank:'',
            }:{
                id:row.id,
                pid:row.pid,
                name:row.name,
                reference:row.reference,
                unit:row.unit,
                type:row.type,
                rank:row.rank,
                isEnable:String(row.isEnable),
                remark:row.remark,
                creatorName:row.creatorName,
                createTime:row.createTime
            }
        },
        addUpdateHandle(data){
              let self = this;
            let type = self.dialog2.title=='新增'?'insert':'update';
            api.addUpdataMaterialCheckedConfig(type,data).then(res=>{
                self.$message.success(`${self.dialog2.title}成功`);
                self.dialog2.isShow=false;
                self.getCheckConfigList();
            },error=>{
                 self.$message.error(`${self.dialog2.title}失败`);
            })
        }
    }
}
</script>
<style scoped>
.searchBox{
    width:300px;
    margin-bottom:24px;
}

</style>
